<template>
    <div class="good-view" :class="{ active: receive }">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="6000" indicator-color="#168ce6">
            <van-swipe-item v-for="(item, index) in swipeList" :key="index">
                <img class="image" v-lazy="getOtherImageUrl(item)">
            </van-swipe-item>
        </van-swipe>
        <!-- 举报或者分享 -->
        <div class="report">
            <img class="complain" @click="goProposal" src="@/assets/images/goodsDetails/complain-icon.png">
            <img class="share" :data-clipboard-text="link" @click="copyLink"
                src="@/assets/images/goodsDetails/share.png">
        </div>
        <!-- 商品详细 -->
        <div class="card">
            <!-- 价格 -->
            <div class="detail bor">
                <div class="info flex">
                    <div class="price f14 bold">
                        ￥<span>{{ allData.min_price }}</span>/天起
                    </div>
                    <div class="old-price bold f14" v-if="(allData.dayRent_new && allData.activity)">
                        卷后价
                        <span>
                            原价￥{{ allData.dayRent_new }}/天
                        </span>
                    </div>
                    <div class="sales">
                        销量{{ allData.sell_num }}
                    </div>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="goods-info bor">
                <span class="title bold">{{ allData.extension_title }}</span>
                <div class="change flex">
                    <div class="left bold">
                        <div class="item">
                            <img src="@/assets/images/d05.png">
                            <span>全新</span>
                        </div>
                        <div class="item">
                            <img src="@/assets/images/d05.png">
                            <span>包邮</span>
                        </div>
                        <div class="item">
                            <img src="@/assets/images/d05.png">
                            <span>可买断</span>
                        </div>
                    </div>
                    <span class="lowest">{{ allData.min_lease_term }}天起租</span>
                </div>
            </div>
            <!-- 优惠卷 -->
            <div class="coupon sha flex bor">
                <div class="left flex">
                    <span class="title bold">固定折扣卷</span>
                    <div class="honbao">
                        <img src="@/assets/images/d04.png">
                        <span>首月租金1元</span>
                    </div>
                </div>
                <div class="right" @click="receiveHandle">
                    <span>前往领取</span>
                    <img src="@/assets/images/down.png">
                </div>
            </div>
            <!-- 租金 -->
            <div class="rent sha flex bor">
                <div class="left flex">
                    <span class="title bold">租金</span>
                    <div class="credit">
                        <img src="@/assets/images/d02.png">
                        <span>信用免押</span>
                    </div>
                </div>
                <div class="right">
                    <span>市场价￥{{ allData.min_price_g }}起</span>
                </div>
            </div>
            <!-- 配送 -->
            <div class="delivery sha flex bor">
                <div class="left flex">
                    <span class="title bold">配送</span>
                </div>
                <div class="right">
                    <span>48小时内发货/寄出包邮/归还包邮</span>
                </div>
            </div>
        </div>
        <!-- 商品详情  -->
        <div class="goods-detail">
            <van-sticky>
                <div class="nav-bar">
                    <div class="detail" :class="{ active: index == 1 }" @click="switchIndex(1)">
                        <span>商品详情</span>
                        <div class="line"></div>
                    </div>
                    <div class="explain" :class="{ active: index == 0 }" @click="switchIndex(0)">
                        <span>租赁说明</span>
                        <div class="line"></div>
                    </div>
                </div>
            </van-sticky>
            <!-- 商品详情图 -->
            <div v-if="index" class="detail-img" v-html="allData.goods_content"></div>
            <div v-else class="detail-img">
                <img v-for="item in 4" v-lazy="getOtherImageUrl(`/material/info_phone_0${item}.jpg`)" :key="item">
            </div>
        </div>
        <!-- 底部操作 -->
        <div class="footer-change" :class="{ active: showContact }">
            <div class="left">
                <div class="home" @click="goHome">
                    <img src="@/assets/images/goodsDetails/home.png">
                    <span class="f14">首页</span>
                </div>
                <div class="service" @click="showContact = true">
                    <img src="@/assets/images/goodsDetails/service.png">
                    <span class="f14">客服</span>
                </div>
            </div>
            <div class="right">
                <div class="block" @click="purchaseHandle">
                    <span>免押租</span>
                </div>
            </div>
        </div>
        <!-- 领取优惠券 -->
        <DrawerComponent :isShow="receive" :updateReceive="closeReceive">
            <DrawerCoupon :updateReceive="closeReceive">
            </DrawerCoupon>
        </DrawerComponent>
        <!-- 购买商品 -->
        <DrawerComponent :isShow="purchase" :updateReceive="closePurchase">
            <DrawerSelectConfig ref="selectConfig" :updateReceive="closePurchase" :id="allData.id"
                :activity_id="allData.activity_idF" :default_price="allData.default_price" :imgurl="allData.imgurl">
            </DrawerSelectConfig>
        </DrawerComponent>
        <!-- 联系客服 -->
        <ContactService v-show="showContact" :close-help="closeContact"></ContactService>
        <loading v-if="!swipeList.length"></loading>
    </div>
</template>
<script>
import DrawerCoupon from "@/components/Goods/DrawerCoupon.vue";
import DrawerComponent from "@/components/Goods/DrawerComponent.vue";
import ContactService from "@/components/Goods/ContactService.vue";
import DrawerSelectConfig from "@/components/Goods/DrawerSelectConfig.vue";
import { Swipe, SwipeItem, Sticky, Toast } from 'vant';
import Clipboard from "clipboard";
export default {
    name: "GoodsView",
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Sticky.name]: Sticky,
        DrawerComponent,
        DrawerCoupon,
        DrawerSelectConfig,
        ContactService
    },
    data() {
        return {
            index: 1,
            receive: false,
            purchase: false,
            link: window.location.href,
            showContact: false,
            swipeList: [],
            goods_content: "",
            allData: {},
        }
    },
    created() {
        this.getData();
    },
    methods: {
        closeContact() {
            this.showContact = false;
        },
        getData() {
            const { goods_id, activity_id } = this.$route.query;
            this.$sendGet("Goods/getGoodsInfo", { goods_id, activity_id })
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data
                        this.swipeList.push(...data.carousel_images.split(","))
                        this.allData = { ...data }

                        this.$refs.selectConfig.getAttrData(this.allData.attr)
                        this.$refs.selectConfig.getPactType(this.allData.pact_type)
                    }
                })
        },
        switchIndex(flag) {
            this.index = flag;
        },
        goHome() {
            this.$router.push({ name: "home" })
        },
        receiveHandle() {
            this.receive = true;
        },
        closeReceive() {
            this.receive = false;
        },
        purchaseHandle() {
            this.purchase = true;
        },
        closePurchase() {
            this.purchase = false;
        },
        goProposal() {
            this.$router.push({ name: "proposal" })
        },
        copyLink() {
            let clipboard = new Clipboard(".share");
            clipboard.on("success", () => {
                Toast("复制路径成功")
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                Toast("复制路径失败")
                clipboard.destroy();
            });
        },
    },
    mounted() {
        window.scrollTo(0, 0)
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-swipe__indicator {
    height: 4px;
    border-radius: 0;
}

::v-deep .van-swipe__indicator--active {
    width: 10px;
}

.bor {
    border-radius: 15px;
}

.sha {
    box-shadow: 0px -2px 5px #acabab99;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.good-view {
    position: relative;

    &.active {
        height: 100vh;
        overflow: hidden;
    }

    .report {
        position: absolute;
        display: flex;
        flex-direction: column;
        right: 10px;
        top: 20px;

        img {
            margin-bottom: 10px;
            width: 30px;
        }
    }

    .my-swipe {
        height: 300px;
        background-color: white;

        .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
        }

        .image {
            height: 100%;
        }
    }

    .card {
        padding: 10px;
        background-color: #f7f7f7;
        padding-top: 0;

        .detail {
            padding: 20px 15px;
            background-image: linear-gradient(to right, #1e1d1a, #2d2821, #3a3228, #463a2e);
            padding-bottom: 65px;

            .info {
                .price {
                    color: white;

                    span {
                        font-size: 20px;

                    }
                }

                .old-price {
                    background-image: linear-gradient(to right, #f2b07d, #f2be92, #f3cdaa);
                    padding: 3px 8px 8px 3px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 15px;
                    border-bottom-right-radius: 15px;

                    span {
                        text-decoration: line-through;
                    }
                }

                .sales {
                    color: #b0a69c;
                }
            }
        }

        .goods-info {
            margin-top: -30px;
            padding: 10px;
            background-color: white;

            .title {
                margin-bottom: 20px;
            }

            .change {
                margin: 20px 0;

                .left {
                    display: flex;
                    margin-left: -8px;

                    .item {
                        padding: 0 8px;
                        border-left: 1px solid grey;

                        &:nth-of-type(1) {
                            border-left: 0;
                        }

                        img {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }

        .coupon {
            padding: 20px 10px;
            margin-top: -10px;
            background-color: white;
            padding-bottom: 50px;

            .left {
                .honbao {
                    margin-left: 10px;
                    display: flex;
                    padding: 3px 5px;
                    border: 1px solid #d21720;
                    background-color: #fdebe7;
                    border-radius: 5px;

                    img {
                        width: 17px;
                        object-fit: contain;
                        margin-right: 5px;
                    }
                }
            }

            .right {
                display: flex;
                align-items: center;

                span {
                    margin-right: 5px;
                }

                img {
                    width: 10px;
                    transform: rotateZ(270deg);
                }
            }
        }

        .rent {
            padding: 20px 10px;
            margin-top: -30px;
            background-color: white;
            padding-bottom: 50px;

            .left {
                .credit {
                    margin-left: 5px;
                    border: 1.5px solid #2a76d4;
                    padding: 0 5px;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 10px;
                    }
                }
            }
        }

        .delivery {
            padding: 20px 10px;
            margin-top: -30px;
            background-color: white;
        }
    }

    .goods-detail {
        margin-bottom: 60px;

        .nav-bar {
            display: flex;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: 20px;
            background-color: white;

            &>div {
                width: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 15px;

                .line {
                    width: 55px;
                    height: 2px;
                    background-color: transparent;
                    border-radius: 2px;
                    margin-top: 15px;
                }

                &.active {
                    span {
                        font-weight: bold;
                    }

                    .line {
                        background-color: #f82329;
                    }
                }
            }
        }

        .detail-img {
            max-width: 100vw;

            &::v-deep(img) {
                width: 100vw;
            }
        }
    }

    .footer-change {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 375px;
        height: 60px;
        display: flex;
        background-color: white;
        border-top: 1px solid #c6cdd5;

        &.active {
            z-index: 1200;
        }

        .left,
        .right {

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
        }

        .left {
            width: 60%;
            padding-right: 30px;

            .home,
            .service {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 20px;
                }

                span {
                    color: #989898;
                }
            }
        }

        .right {
            width: 40%;

            .block {
                width: 120px;
                height: 35px;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                color: white;
                text-align: center;
                line-height: 35px;
                background-image: linear-gradient(to right, #fd5346, #f9142b);
            }
        }
    }
}
</style>